<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转的魔方</title>
	<style>
		*{margin: 0;padding: 0;}
		.container{
			width: 500px;
			height: 500px;
			border: solid 1px red;
			margin: 20px auto;
			transform-style: preserve-3d;
			perspective: 500px;
			perspective-origin: 50% 50%}
			.box{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				margin: 100px auto 0 ;
				animation:box-ani 5s;
				transform-style: preserve-3d;
				/*animation: box-ani 5s infinite; */
			}
			.box div{
				box-shadow: 1px 5px 20px red;
				font-size: 40px;
				text-align: center;
				line-height: 200px;
				width: 200px;
				height: 200px;
				background: rgba(120,40,60,0.5);
				position: absolute;
				border: 1px solid black;
	}
				.d1 {transform: rotateX(90deg)translateZ(100PX);}
				.d2{transform: rotateX(90deg)translateZ(-100PX);}
				.d3{transform: rotateY(90deg)translateZ(100PX);}
				.d4{transform: rotateY(90deg)translateZ(-100PX);}
				.d5{transform:translateZ(100PX);}
				.d6{transform:translateZ(-100PX);}

				@keyframes box-ani{
					0%{transform: rotateY(0deg) rotateX(0deg);}
					100%{transform: rotateY(360deg) rotateX(360deg);}
				}




	</style>
</head>
<body>
	<div class="container">
		<div class="box">
      <div class="d1">box1</div>
      <div class="d2">box2</div>
      <div class="d3">box3</div>
      <div class="d4">box4</div>
      <div class="d5">box5</div>
      <div class="d6">box6</div>
	</div>
	</div>
</body>
</html>